<template>
  <div>
    <!-- 发现音乐navbar -->
    <FindMusicNav />
    <!-- 轮播图 -->
    <Banner />
    <div class="content">
      <div class="content-left">
        <!-- 热门歌单 -->
        <HotSongList />
        <!-- 新碟上架 -->
        <NewDiscShelves />
        <!-- 榜单 -->
        <RankingList />
      </div>
      <div class="content-right">
        <!-- 个人信息 -->
        <PersonalDetails />
        <!-- 歌手列表 -->
        <ArtistList />
      </div>
    </div>
  </div>
</template>

<script>
import FindMusicNav from "@/components/findMusicNav";
import Banner from "./Banner";
import PersonalDetails from "./PersonalDetails";
import ArtistList from './ArtistList'
import HotSongList from './HotSongList'
import NewDiscShelves from './NewDiscShelves'
import RankingList from './RankingList'

export default {
  name: "recommend",
  components: {
    FindMusicNav,
    Banner,
    PersonalDetails,
    ArtistList,
    HotSongList,
    NewDiscShelves,
    RankingList
  },
  data() {
    return {};
  },

  created() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.content {
  padding-bottom:20px;
  width: 1000px;
  margin: 0 auto;
  background-color: #fff;
  display: flex;
  border: 1px solid #d3d3d3;
  border-bottom: 0;
  .content-left {
    flex: 1;
  }
  .content-right {
    box-sizing: border-box;
    width: 254px;
    border-left: 1px solid #d3d3d3;
    // border-right:1px solid #d3d3d3;
  }
}
.content {
  width: 1000px;
  margin: 0 auto;
}
.findBox {
  width: 1000px;
  margin: 0 auto;
}
.el-carousel__item.is-active.el-carousel__item--card.is-in-stage {
  height: 284px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
<style lang="scss">
.el-carousel__button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #b9bbbe;
}
.el-carousel__indicator.el-carousel__indicator--horizontal.is-active {
  .el-carousel__button {
    background-color: #b90b0b;
  }
}
.el-carousel__arrow {
  display: none;
}
</style>